<template>
  <div class="wallet">
    <el-row :gutter="20">
      <el-col :span="20">
        <el-row :gutter="20" style="min-width: 1200px">
          <div class="title-wrap">
            <div class="tit">余额账户</div>
            <div class="date">更新时间 <span>2022.10.22 13:03:26</span></div>
          </div>
          <el-col :span="6" v-for="item of list" :key="item.label">
            <div class="total-item">
              <div class="left">
                <div class="tit">{{ item.label }}</div>
                <div class="count">
                  ¥<span class="bigNum">{{
                    item.num ? Number(item.num).toFixed(2) : 0
                  }}</span>
                  <!-- <span class="smallNum">{{ item.num2 }}</span> -->
                </div>
              </div>
              <div class="right">
                <img
                  :src="require(`@/assets/imgs/checkAccount/${item.img}.png`)"
                />
              </div>
            </div>
          </el-col>
        </el-row>

        <div class="channel-wrap">
          <div class="title-wrap c-tit" v-if="list2.length > 0">
            <div class="tit">渠道余额</div>
          </div>
          <div class="card-item" v-for="item of list2" :key="item.channel">
            <el-card>
              <div class="top">
                <el-row>
                  <el-col :span="24" class="t-area">
                    <div class="left">
                      <div class="c">
                        <img
                          :src="
                            require(`@/assets/imgs/checkAccount/${
                              channelImg[item.channel]
                            }.png`)
                          "
                        />
                      </div>
                      <div class="d">
                        <span>更新时间</span><span>{{ item.createDate }}</span>
                      </div>
                    </div>
                    <div class="right">
                      <span>开通日期</span><span>{{ item.createDate }}</span>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div class="center">
                      <el-row v-if="item.channel != 'wechat'">
                        <el-col :span="6">
                          <div class="content">
                            <div class="count">
                              {{
                                item.acctBalance == null
                                  ? "-"
                                  : item.channel !== "ada" &&
                                    item.channel !== "douyin" &&
                                    item.channel !== "ali"
                                  ? "-"
                                  : `¥ ${item.acctBalance.toFixed(2)}`
                              }}
                            </div>
                            <div class="tit">账户余额</div>
                          </div>
                        </el-col>
                        <el-col
                          :span="6"
                          v-if="
                            item.channel == 'ada' || item.channel == 'douyin'
                          "
                        >
                          <div class="content">
                            <div class="count">
                              {{
                                item.withdrawableBalance == null
                                  ? "-"
                                  : item.channel !== "ada" &&
                                    item.channel !== "douyin" &&
                                    item.channel !== "ali"
                                  ? "-"
                                  : `¥ ${item.withdrawableBalance.toFixed(2)}`
                              }}
                            </div>
                            <div class="tit">可提现金额</div>
                          </div>
                        </el-col>
                        <el-col
                          :span="6"
                          v-if="
                            item.channel == 'ada' || item.channel == 'douyin'
                          "
                        >
                          <div class="content">
                            <div class="count">
                              {{
                                item.withdrawableBalance == null
                                  ? "-"
                                  : item.channel !== "ada" &&
                                    item.channel !== "douyin" &&
                                    item.channel !== "ali"
                                  ? "-"
                                  : `¥ ${item.withdrawableBalance.toFixed(2)}`
                              }}
                            </div>
                            <div class="tit">在途金额</div>
                          </div>
                        </el-col>
                        <el-col :span="6" v-if="item.channel == 'ali'">
                          <div class="content">
                            <div class="count">
                              {{
                                item.avlBalance == null
                                  ? "-"
                                  : item.channel !== "ada" &&
                                    item.channel !== "douyin" &&
                                    item.channel !== "ali"
                                  ? "-"
                                  : `¥ ${item.avlBalance.toFixed(2)}`
                              }}
                            </div>
                            <div class="tit">可用金额</div>
                          </div>
                        </el-col>
                        <el-col :span="6" v-if="item.channel == 'ali'">
                          <div class="content">
                            <div class="count">
                              {{
                                item.avlBalance == null
                                  ? "-"
                                  : item.channel !== "ada" &&
                                    item.channel !== "douyin" &&
                                    item.channel !== "ali"
                                  ? "-"
                                  : `¥ ${item.avlBalance.toFixed(2)}`
                              }}
                            </div>
                            <div class="tit">可结算余额</div>
                          </div>
                        </el-col>
                        <el-col
                          :span="6"
                          v-if="
                            item.channel == 'douyin' || item.channel == 'ali'
                          "
                        >
                          <div class="content">
                            <div class="count">
                              {{
                                item.frzBalance == null
                                  ? "-"
                                  : item.channel !== "ada" &&
                                    item.channel !== "douyin" &&
                                    item.channel !== "ali"
                                  ? "-"
                                  : `¥ ${item.frzBalance.toFixed(2)}`
                              }}
                            </div>
                            <div class="tit">冻结金额</div>
                          </div>
                        </el-col>
                      </el-row>
                      <div v-else style="margin: 20px 0">
                        <span>暂不支持查询余额</span>
                      </div>
                      <!-- <div
                            v-if="item.channel != 'douyin'"
                            @click="yueTransferFn(item)"
                          >
                            企业付款
                          </div> -->
                    </div>
                  </el-col>
                  <!-- <el-col :span="4">
                    <div class="right">
                      <div class="btn-content">
                        <el-button
                          v-if="
                            (item.channel == 'ada' ||
                              item.channel == 'douyin') &&
                            buttonRole
                          "
                          type="primary"
                          class="width160"
                          @click="withdrawFn(item)"
                          >提现</el-button
                        >
                        <div
                          class="link"
                          :style="
                            item.channel == 'ada' ? 'marginTop: 26px' : ''
                          "
                        >
                          <div
                            @click="payFn(item)"
                            v-if="item.channel == 'ada'"
                          >
                            充值
                          </div>
                          <div
                            v-if="item.channel != 'douyin'"
                            @click="yueTransferFn(item)"
                          >
                            企业付款
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-col> -->
                </el-row>
              </div>
              <!-- <div
                class="bot-acc-info"
                v-if="
                  userType !== 'main_admin' &&
                  userType !== 'main_user' &&
                  item.memberBank !== null &&
                  item.channel == 'ada'
                "
              >
                <div class="tit">结算卡</div>
                <div class="num">
                  <img
                    v-if="item.memberBank && item.memberBank.bankCode"
                    :src="
                      require(`@/assets/imgs/bank/${item.memberBank.bankCode}.png`)
                    "
                  />
                  <span>{{ item.memberBank.cardNo }}</span>
                </div>
                <div class="com" @click="openLogUpdate(item)">更改</div>
                <div class="com" @click="openLogDel(item)">解绑</div>
              </div> -->
            </el-card>
            <!-- <div
              class="bot-notice-info"
              v-if="
                userType !== 'main_admin' &&
                userType !== 'main_user' &&
                item.memberBank == null &&
                item.channel == 'ada'
              "
            >
              <div class="notice">
                <img src="@/assets/imgs/checkAccount/warn.png" alt="" />
                <span
                  >本渠道还未设置结算卡，如需提现或变更收款到结算卡，需先行设置。</span
                >
              </div>
              <div class="com" @click="toBindCard">前往设置</div>
            </div> -->
          </div>
        </div>
      </el-col>
      <el-col :span="4" v-if="list2.length > 0">
        <div class="commandWrap">
          <div class="title">常用功能</div>
          <div class="command-list">
            <div
              class="list-item"
              v-for="item of commandList"
              :key="item.id"
              @click="toPath(item)"
            >
              <img
                :src="require(`@/assets/imgs/setting/${item.imgUrl}`)"
                alt="icon"
              />
              <div class="tit">{{ item.label }}</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-dialog
      class="cardDialog"
      :visible.sync="addCard"
      :show-close="false"
      width="455px"
      top="30vh"
    >
      <div class="addTitle">
        <span
          >{{
            this.logType == 1 ? "设置" : this.logType == 2 ? "切换" : "解绑"
          }}结算卡</span
        >
      </div>
      <div class="tip">
        {{
          this.logType == 1
            ? "您还未设置结算卡，暂时不可提现。设置成功并审批完成后方可提现至指定结算卡。"
            : this.logType == 2
            ? "提交切换结算卡，待支付渠道审核通过后，此渠道即可提现至该结算卡。"
            : "解绑结算卡会导致无法进行提现操作，请慎重选择。"
        }}
      </div>
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        v-if="this.logType !== 3"
      >
        <el-form-item prop="memberBankId">
          <img
            v-if="bankCode != 0"
            :src="require('@/assets/imgs/bank/' + bankCode + '.png')"
            style="width: 22px; border-radius: 22px"
            class="form-img"
          />
          <el-select
            v-model="form.memberBankId"
            placeholder="选择结算卡"
            class="width100"
            @change="setCard"
          >
            <el-option
              v-for="(item, index) of bankList"
              :key="index"
              :label="item.cardNo"
              :value="item.id"
            >
              <div style="display: flex; align-items: center">
                <img
                  v-if="item.bankCode"
                  :src="require(`@/assets/imgs/bank/${item.bankCode}.png`)"
                  style="width: 22px; border-radius: 22px; margin-right: 10px"
                />
                <span style="font-size: 14px; color: #bfbfbf">{{
                  item.cardNo
                }}</span>
              </div>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cencelReset">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog
      class="cardDialog"
      :visible.sync="tipCard"
      :show-close="false"
      width="455px"
      top="30vh"
    >
      <div class="addTitle">
        <span>无结算卡</span>
      </div>
      <div class="tip">
        本渠道还未设置结算卡，如需提现或变更收款到结算卡，需先行设置。
        <span style="cursor: pointer" @click="toBindCard">前往设置</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="tipCard = false">关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog
      class="addDialog"
      :visible.sync="addCardDialog"
      width="30%"
      center
    >
      <div class="addTitle">
        <span>充值</span>
      </div>
      <br />
      <br />
      <el-form
        ref="payForm"
        :rules="rules"
        :model="payForm"
        label-width="120px"
      >
        <el-form-item label="收款商户">
          <div>{{ memberName }}</div>
        </el-form-item>

        <br />
        <br />
        <el-form-item label="充值金额" prop="num">
          <el-input
            placeholder="请输入充值金额"
            v-model="payForm.num"
            type="number"
            style="width: 330px"
          ></el-input>
          元
        </el-form-item>
        <br />
        <br />
        <el-form-item label="充值描述" prop="desc">
          <el-input
            placeholder="请输入描述"
            type="textarea"
            :rows="3"
            v-model="payForm.desc"
            style="width: 350px"
          ></el-input>
        </el-form-item>
        <br />
        <br />
        <br />
      </el-form>
      <span slot="footer" class="dialog-footer" style="margin-top: 160px">
        <el-button
          type="primary"
          @click="submitForm('payForm')"
          style="width: 350px; height: 42px; font-size: 14px"
          >提交</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      class="channelDialog"
      :visible.sync="checkPayType"
      :show-close="false"
      width="455px"
      top="30vh"
    >
      <div class="addTitle">
        <span>支付渠道</span>
      </div>
      <div class="tip">微信企业付款之前请先选择支付渠道</div>
      <el-form ref="channelForm" :rules="channelRules" :model="channelForm">
        <el-form-item prop="payChannel">
          <el-select
            v-model="channelForm.payChannel"
            placeholder="请选择"
            class="width100"
          >
            <el-option label="微信JSAPI支付" value="wx_js"> </el-option>
            <el-option label="微信app支付" value="wx_app"> </el-option>
            <el-option label="微信小程序" value="wx_lite"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="payChannelReset">取消</el-button>
        <el-button type="primary" @click="payChannelSubmit">提交</el-button>
      </div>
    </el-dialog>
    <codeDialogVue
      codeId="9"
      :type="codeType"
      :codeDialog.sync="codeDialog"
      @codeState="codeStateFn"
    />
  </div>
</template>

<script>
import codeDialogVue from "@/components/codeDialog.vue";
import { isAmount } from "@/utils/validate";
import mixin from "@/mixins/mixin";
import base64 from "@/utils/code";
import { getUserInfo } from "@/utils/public";

export default {
  mixins: [mixin],
  name: "walletVue",
  components: {
    codeDialogVue,
  },
  data() {
    const checkLimitAmount = (rule, value, callback) => {
      if (value.substr(0, 1) == "." || value.charAt(value.length - 1) == ".") {
        callback(new Error("请输入有效的金额"));
      } else {
        if (value > 0) {
          if (!isAmount(value)) {
            callback(new Error("金额必须为整数或者保留两位小数"));
          }
          callback();
        } else {
          callback(new Error("金额必须大于0"));
        }
      }
    };
    return {
      commandList: [
        {
          id: 0,
          imgUrl: "c1.png",
          label: "提现",
          path: "/account/withdraw",
        },
        {
          id: 0,
          imgUrl: "c2.png",
          label: "充值",
          path: "/account/invest",
        },
        {
          id: 0,
          imgUrl: "c3.png",
          label: "企业付款",
          path: "/account/transfer_reset",
        },
        {
          id: 0,
          imgUrl: "c4.png",
          label: "企业批量付款",
          path: "/account/transfer_batch",
        },
      ],
      checkPayItem: null,
      channelForm: {
        payChannel: "",
      },
      channelRules: {
        payChannel: [
          { required: true, message: "请选择支付渠道", trigger: "change" },
        ],
      },
      buttonRole: false,
      codeItem: "",
      codeType: "",
      codeDialog: false,
      mixinViewModuleOptions: {
        getDataListURL: "/api/merchant/memberbank/searchByPage",
      },
      bankList: [],
      bankListType: true,
      bankCode: 0,
      memberName: "",
      rules: {
        memberBankId: [
          { required: true, message: "结算卡不能为空", trigger: "change" },
          //   { validator: checkLimitAmount, trigger: "change" },
        ],
        num: [
          { required: true, message: "金额不能为空", trigger: "change" },
          { validator: checkLimitAmount, trigger: "change" },
        ],
        desc: [
          { required: true, message: "描述不能为空", trigger: "change" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "change",
          },
        ],
      },
      addCardDialog: false,
      addCard: false,
      checkPayType: false,
      tipCard: false,
      logType: 1, //默认添加账户弹窗
      form: {},
      payForm: {
        num: "",
      },
      list: [
        {
          label: "账户余额",
          color: "#1E77E9",
          shadow: "rgba(30,119,233,0.31)",
          num1: "0",
          num2: "",
          img: "total1",
        },
        {
          label: "可提现余额",
          color: "#15DAA9",
          shadow: "rgba(21,218,169,0.23)",
          num1: "0",
          num2: "",
          img: "total3",
        },
        {
          label: "赠送余额",
          color: "#19B1F2",
          shadow: "rgba(25,177,242,0.29)",
          num1: "0",
          num2: "",
          img: "total2",
        },

        {
          label: "冻结余额",
          color: "#16D2D8",
          shadow: "rgba(22,210,216,0.24)",
          num1: "0",
          num2: "",
          img: "total4",
        },
      ],
      list2: [],
      channelImg: {
        wechat: "c3",
        ali: "c2",
        ada: "c1",
        douyin: "c4",
        // yse: "银盛",
      },
      curChannel: "",
    };
  },
  created() {
    // if (this.$store.state.buttonList) {
    //   this.$store.state.buttonList.forEach((e) => {
    //     if (e.type == "withdrawal") {
    //       this.buttonRole = true;
    //     }
    //   });
    // }
    // console.log(getUserInfo());
    this.userType = getUserInfo().userType ? getUserInfo().userType : "";
    this.$http.get("/api/merchant/memberinfo/get").then((res) => {
      if (res.code === "0000") {
        this.memberName = res.data.memberName;
      }
    });
    this.getChannelList();
  },
  watch: {
    "$store.state.testLine": {
      handler() {
        if (this.$route.name == this.$options.name) {
          this.userType = getUserInfo().userType ? getUserInfo().userType : "";
          this.$http.get("/api/merchant/memberinfo/get").then((res) => {
            if (res.code === "0000") {
              this.memberName = res.data.memberName;
            }
          });
          this.getChannelList();
        }
      },
    },
    deep: true,
  },
  methods: {
    getUserInfo,
    toPath(item) {
      if (item.label == "提现") {
        if (this.buttonRole) {
          this.$router.push({
            path: item.path,
            // query: { channel: item.channel },
          });
        } else {
          this.$message.error("暂无权限");
        }
      } else {
        this.$router.push({
          path: item.path,
          // query: { channel: item.channel },
        });
      }
    },
    toBindCard() {
      this.tipCard = false;
      this.$router.push("/setting/addPayee");
    },
    codeStateFn(val) {
      if (val) {
        this.openLogUpdate(this.codeItem);
      }
    },
    goCode(val, item) {
      this.codeType = val;
      this.codeItem = item;
      this.codeDialog = true;
    },
    getChannelList() {
      this.$http.get("/api/merchant/settleaccount/wallet").then((res) => {
        if (res.code === "0000") {
          if (res.data.buttonFlag) {
            this.buttonRole = true;
          } else {
            this.buttonRole = false;
          }
          this.list[0].num = `${res.data.acctBalance}`;
          // this.list[0].num1 = `${res.data.acctBalance}`.split(".")[0];
          // this.list[0].num2 = `${res.data.acctBalance}`.split(".")[1]
          //   ? "." + `${res.data.acctBalance}`.split(".")[1]
          //   : "";
          this.list[1].num = `${res.data.avlBalance}`;
          // this.list[1].num1 = `${res.data.avlBalance}`.split(".")[0];
          // this.list[1].num2 = `${res.data.avlBalance}`.split(".")[1]
          //   ? "." + `${res.data.avlBalance}`.split(".")[1]
          //   : "";
          this.list[3].num = `${res.data.frzBalance}`;
          // this.list[3].num1 = `${res.data.frzBalance}`.split(".")[0];
          // this.list[3].num2 = `${res.data.frzBalance}`.split(".")[1]
          //   ? "." + `${res.data.frzBalance}`.split(".")[1]
          //   : "";
          this.list[2].num = `${res.data.withdrawableBalance}`;
          // this.list[2].num1 = `${res.data.withdrawableBalance}`.split(".")[0];
          // this.list[2].num2 = `${res.data.withdrawableBalance}`.split(".")[1]
          //   ? "." + `${res.data.withdrawableBalance}`.split(".")[1]
          //   : "";
          this.list2 = res.data.channelInfo;
          // console.log(this.list2)
        }
      });
    },
    cencelReset() {
      this.addCard = false;
      this.logType !== 3 && this.$refs.form.resetFields(); //重置状态
      // this.bankCode = 0;
      // this.logType = 1;
    },
    handleSubmit() {
      if (this.logType == 3) {
        let param = {
          ...this.form,
          payformChannel: this.curChannel,
          // memberBankId: this.form.cardInfo.id,
        };
        //console.log(param);
        this.$http
          .post("/api/merchant/settleaccount/stop", param)
          .then((res) => {
            if (res.code === "0000") {
              this.$message.success("解绑结算卡成功！");
              this.cencelReset();

              this.getChannelList();
              this.query();
            }
          });
      } else {
        this.$refs.form.validate((valid) => {
          if (valid) {
            let param = {
              ...this.form,
              payformChannel: this.curChannel,
              // memberBankId: this.form.cardInfo.id,
            };
            //console.log(param);
            if (this.logType == 1) {
              this.$http
                .post("/api/merchant/settleaccount/add", param)
                .then((res) => {
                  if (res.code === "0000") {
                    this.$message.success("设置结算卡成功！");
                    this.cencelReset();

                    this.getChannelList();
                    this.query();
                  }
                });
            } else {
              this.$http
                .post(`/api/merchant/settleaccount/update`, param)
                .then((res) => {
                  if (res.code === "0000") {
                    this.$message.success("切换结算卡成功！");
                    this.cencelReset();
                    this.getChannelList();
                    this.query();
                  }
                });
            }
          } else {
            return false;
          }
        });
      }
    },
    payChannelReset() {
      this.checkPayType = false;
      this.$refs.channelForm.resetFields(); //重置状态
    },
    payChannelSubmit() {
      this.$refs.channelForm.validate((valid) => {
        if (valid) {
          this.checkPayType = false;
          this.$router.push({
            path: "/account/enterprisePayment",
            query: {
              item: base64.encode(JSON.stringify(this.checkPayItem)),
              payType: this.channelForm.payChannel,
            },
          });
        } else {
          return false;
        }
      });
    },
    setCard(id) {
      //console.log(id);
      let obj = this.bankList.find((item) => item.id === id);
      //console.log(obj);
      if (obj) {
        this.bankCode = obj.bankCode;
      }
    },
    // 获取数据列表
    query() {
      this.$http
        .post(this.mixinViewModuleOptions.getDataListURL, {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          params: {
            ...this.dataForm,
          },
        })
        .then((res) => {
          if (res.code !== "0000") {
            this.dataList = [];
            this.total = 0;
            return this.$message.error(res.msg);
          }
          //console.log(res.data.list);
          this.bankList = res.data.list;
          if (this.bankList == []) {
            this.bankListType = false;
          }
          //   this.total = res.data.total;
          //   if (this.dataList.length === 0) this.showImg = true;
          // this.sortAccount(this.bankList);
          //   this.currentBank =
          //     this.dataList.find((item) => item.currentSettleAccount) || {};
          // console.log(this.currentBank, "----");
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    },
    sortAccount(arr) {
      const useArr = arr.filter((item) => item.currentSettleAccount == true);
      this.bankList = useArr;
      //console.log(this.bankList);
    },
    openLog(channel) {
      this.form = {};
      this.bankCode = 0;
      this.curChannel = channel;
      this.logType = 1; //设置弹窗类型
      this.addCard = true;
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
    },
    openTip() {
      this.tipCard = true;
    },
    openLogUpdate(item) {
      this.curChannel = item.channel;
      this.logType = 2; //设置弹窗类型
      this.form.memberBankId = item.memberBank.id; //设置默认账号
      this.bankCode =
        item.memberBank && item.memberBank.bankCode
          ? item.memberBank.bankCode
          : 0; //设置默认银行编码
      this.addCard = true;
    },
    openLogDel(item) {
      this.curChannel = item.channel;
      this.logType = 3; //设置弹窗类型
      this.form.memberBankId = item.memberBank.id; //设置默认账号
      this.addCard = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http
            .post("/api/merchant/balanceCharge/add", {
              payAmt: this.payForm.num,
              payformChannel: this.payForm.channel,
              goodsDesc: this.payForm.desc,
            })
            .then((res) => {
              if (res.code === "0000") {
                this.addCardDialog = false;
                window.open(res.data.cashierUrl);
                setTimeout(() => {
                  this.$router.push("/qiye/orderCenter");
                }, 3000);
              }
            });
        } else {
          return false;
        }
      });
    },
    payFn(item) {
      //console.log(item);
      // this.$router.push("/account/invest");
      this.$router.push({
        path: "/account/invest",
        query: {
          channel: item.channel,
        },
      });

      //   this.addCardDialog = true;
      //   this.payForm = {};
      //   this.payForm.channel = item.channel;
    },
    yueTransferFn(item) {
      if (item.channel == "wechat") {
        this.checkPayType = true;
        this.checkPayItem = item;
      } else {
        // this.$router.push({ path: "/account/yueTransfer", query: { item } });
        this.$router.push({
          path: "/account/enterprisePayment",
          query: { item: base64.encode(JSON.stringify(item)) },
        });
      }
    },
    withdrawFn(item) {
      if (
        this.userType == "main_admin" ||
        this.userType == "main_user" ||
        item.channel == "douyin"
      ) {
        //主商户或抖音
        // 提现
        this.$router.push({
          path: "/account/withdraw",
          query: { channel: item.channel },
        });
      } else {
        if (item.memberBank == null) {
          this.openTip();
        } else {
          // 提现
          this.$router.push({
            path: "/account/withdraw",
            query: { channel: item.channel },
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.wallet {
  .title-wrap {
    display: flex;
    align-items: center;
    padding: 0 10px;
    padding-bottom: 10px;
    &.c-tit {
      padding-left: 0;
      margin-top: 10px;
    }
    .tit {
      font-size: 18px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #1d1c1c;
      margin-right: 20px;
      // margin-bottom: 10px;
    }
    .date {
      font-size: 12px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #666666;
    }
  }
  .commandWrap {
    width: 100%;
    height: 100vh;
    background: #ffffff;
    box-shadow: 0px 1px 4px 0px rgba(212, 224, 233, 0.5);
    border-radius: 6px;
    padding: 20px;
    .title {
      font-size: 18px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #1d1c1c;
      margin-bottom: 20px;
    }
    .command-list {
      .list-item {
        display: flex;
        align-items: center;
        padding: 0px 10px;
        background: #f7f7f7;
        border-radius: 4px;
        margin-bottom: 10px;
        cursor: pointer;
        .tit {
          // font-size: 16px;
          // font-family: PingFangSC, PingFang SC;
          // font-weight: 400;
          // color: #1d1c1c;
        }
      }
    }
  }
  .el-form-item {
    margin-bottom: 0;
  }

  .total-item {
    background: #ffffff;
    box-shadow: 0px 1px 4px 0px rgba(212, 224, 233, 0.5);
    border-radius: 10px;
    padding: 18px 30px 18px 30px;
    display: flex;
    justify-content: space-between;
    .left {
      .tit {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #869daa;
      }
      .count {
        font-size: 20px;
        font-family: GothamSSm-Medium, GothamSSm;
        font-weight: 500;
        color: #4f595f;
        margin-top: 3px;
      }
    }
    .right {
      display: flex;
      align-items: center;
    }
  }

  .channel-wrap {
    padding-top: 10px;
    .card-item {
      margin-bottom: 10px;
      .top {
        // display: flex;
        // justify-content: space-between;
        padding: 20px 22px;
        .t-area {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .left {
            // width: 270px;
            //   height: 100px;
            display: flex;
            align-items: center;
            .c {
              margin-right: 20px;
              img {
                // width: 85px;
                height: 24px;
              }
            }
            .d {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #666666;
              opacity: 0.5;
              text-align: center;
              span {
                //   font-family: GothamSSm-Book, GothamSSm;
                display: inline-block;
                font-weight: normal;
                margin: 0 5px;
              }
            }
          }
          .right {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            opacity: 0.5;
            text-align: center;
            span {
              //   font-family: GothamSSm-Book, GothamSSm;
              display: inline-block;
              font-weight: normal;
              margin: 0 5px;
            }
          }
        }

        .right {
          // width: 290px;
          .btn-content {
            height: 80px;
            border-left: 1px solid #e9e9e9;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .width160 {
              width: 160px;
              border-radius: 16px;
            }
            .link {
              div {
                display: inline-block;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #03bfc6;
                margin: 0 25px;
                cursor: pointer;
              }
            }
          }
        }
        .center {
          // min-width: 984px;
          .content {
            height: 65px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            // align-items: st;
            .count {
              font-size: 20px;
              font-family: GothamSSm-Medium, GothamSSm;
              font-weight: 500;
              color: #4f595f;
            }
            .tit {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #869daa;
              margin-top: 5px;
            }
          }
        }
      }
      .bot-acc-info {
        background: #fbfbfb;
        border-radius: 0px 0px 10px 10px;
        padding: 20px 4.5%;
        display: flex;
        align-items: center;
        .tit {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          margin-right: 15px;
        }
        .num {
          display: flex;
          align-items: center;
          margin-right: 50px;

          img {
            width: 20px;
            border-radius: 20px;
            margin-right: 10px;
          }
          span {
            font-size: 14px;
            // font-family: GothamSSm-Book, GothamSSm;
            font-weight: normal;
            color: #7a8287;
          }
        }
        .com {
          cursor: pointer;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #03bfc6;
          margin-right: 15px;
        }
      }
    }
    .bot-notice-info {
      margin-top: 10px;
      display: flex;
      align-items: center;
      .notice {
        min-width: 549px;
        background: #fff9f9;
        border-radius: 6px;
        border: 1px solid #f7d8d8;
        padding: 8px 20px;
        margin-right: 32px;
        display: flex;
        align-items: center;
        img {
          margin-right: 20px;
        }
        span {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #fc8f90;
        }
      }
      .com {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #03bfc6;
        cursor: pointer;
      }
    }
  }

  .item {
    // width: 376px;
    height: 177px;
    background: #1e77e9;
    box-shadow: 4px 6px 14px 0px rgba(30, 119, 233, 0.31);
    border-radius: 14px;
    color: #fff;
    text-align: center;
    padding-top: 46px;

    .bigNum {
      font-size: 32px;
      font-weight: bold;
      font-family: GothamSSm;
    }
    .smallNum {
      font-size: 32px;
      font-weight: bold;
      font-family: GothamSSm;
    }
    .text {
      font-size: 16px;
      font-weight: 400;
      margin-top: 8px;
    }
  }

  .wrap {
    position: relative;
    // width: 376px;

    height: 385px;
    color: #4f595f;
    border-radius: 10px;
    overflow: hidden;
    padding: 10px 0px 0px 0px;
    .source {
      width: 12px;
      height: 12px;
      background: #03bfc6;
      border-radius: 13px;
      display: inline-block;
      color: #fff;
      text-align: center;
      line-height: 24px;
      margin: 0 25px;
      vertical-align: middle;
    }
    .sourceText {
      font-size: 16px;
      vertical-align: middle;
    }
    .hint {
      color: #bfbfbf;
      margin: 7px 0 58px 62px;
    }
    .yue {
      display: flex;
      justify-content: space-between;
      div {
        flex: 1;
        text-align: center;
      }
      .yueType {
        color: #869daa;
        margin-bottom: 10px;
      }
      .yueNum {
        font-size: 16px;
        // font-weight: bold;
        // font-family: GothamSSm;
      }
    }
    .btnIcon {
      // text-align: right;
      // padding-right: 10px;
      // margin-top: 60px;
      position: absolute;
      bottom: -2px;
      left: -1px;
      width: 100.3%;
      // width: 378px;
      display: flex;
      border-radius: 0px 0px 10px 10px;
      overflow: hidden;
      justify-content: space-between;
      // background: #000;
      span {
        cursor: pointer;
        font-size: 14px;
        display: inline-block;
        width: 100%;
        height: 36px;
        background: #ffffff;
        // border-radius: 21px;
        border: 1px solid #e9e9e977;
        border-top: 2px solid #e9e9e977;
        border-right: none;
        color: #03bfc6;
        text-align: center;
        line-height: 36px;
      }
    }
  }
  .cardDialog {
    .addTitle {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.85);
    }
    .tip {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
      margin-top: 12px;
      margin-bottom: 30px;
      span {
        color: #03bfc6;
      }
    }
    :deep(.el-dialog) {
      border-radius: 16px;
    }
    :deep(.el-dialog__body) {
      padding: 10px 40px;
      padding-bottom: 60px;
    }
    :deep(.el-button--small) {
      width: 74px;
    }
    :deep(.el-input__inner) {
      padding-left: 40px;
    }
    :deep(.el-form-item__content) {
      position: relative;
    }
    .form-img {
      width: 22px;
      border-radius: 22px;
      position: absolute;
      top: 5px;
      left: 10px;
      z-index: 1;
    }
  }
  .channelDialog {
    .addTitle {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.85);
    }
    .tip {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
      margin-top: 12px;
      margin-bottom: 30px;
      span {
        color: #03bfc6;
      }
    }
    :deep(.el-dialog) {
      border-radius: 16px;
    }
    :deep(.el-dialog__body) {
      padding: 10px 40px;
      padding-bottom: 60px;
    }
    :deep(.el-button--small) {
      width: 74px;
    }
    :deep(.el-form-item__content) {
      position: relative;
    }
    .form-img {
      width: 22px;
      border-radius: 22px;
      position: absolute;
      top: 5px;
      left: 10px;
      z-index: 1;
    }
  }
  .addDialog {
    .addTitle {
      top: 10px;
      position: absolute;
      line-height: 30px;
      height: 45px;
      width: 100%;
      left: 0px;
      color: #03bfc6;
      border-bottom: 4px solid #03bfc6;
      z-index: 1;
      span {
        font-size: 16px;
        margin-left: 30px;
      }
    }
  }
}

:deep(.addDialog .el-dialog) {
  border-radius: 20px;
  // height:480px;
}
:deep(.el-dialog__headerbtn) {
  position: absolute;
  z-index: 100;
}
:deep(.el-input__inner) {
  line-height: 1px !important;
}
:deep(
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button
  ) {
  -webkit-appearance: none;
  margin: 0;
}

:deep(.el-card__body) {
  padding: 0;
}

.width100 {
  width: 100%;
}
</style>
